<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-wms__order}">
      <wms-form v-model="dataForm" :formList="formList" :table-column="tableColumn" :advanced="advanced"
        :showScreen="false" @check-change="checkChange" @changeAdvance="changeAdvance" @getDataList="getDataList"
        @getReset="getReset">
        <el-form-item>
          <div style="display: flex;">
            <el-button v-if="$hasPermission('wms:order:save')" style="margin-right: 10px;" type="primary" size="small"
              @click="addOrUpdateHandle()">{{
                $t('add')
              }}</el-button>
            <el-upload
                v-if="$hasPermission('wms:order:upload')"
                :action="uploadUrl"
                :on-change="uploadFile"
                :auto-upload="false"
                :show-file-list="false"
            >
              <el-button type="primary" plain>信息导入</el-button>
            </el-upload>
            <!-- <el-upload :action="uploadUrl" :headers="headers" :before-upload="beforeAvatarUpload"
              :on-success="getDataList" size="small">
              <el-button v-if="$hasPermission('wms:purchase:upload')" type="primary" size="small"
                :style="{ height: '40px' }">点击上传</el-button>
            </el-upload> -->
          </div>

        </el-form-item>
      </wms-form>
      <el-row v-loading.lock="dataListLoading" :gutter="10">
        <template v-if="dataList.length">
          <el-col class="card-col" :span="6" v-for="item in dataList" :key="item.orderNo">
            <div class="card-content">
              <div class="card-header">
                <i title="出库单" class="el-icon-tickets"></i>
                <a>{{ item.orderNo }}</a>
                <!-- <el-checkbox v-model="checkList[index]" class="check" @change="checkChange"></el-checkbox> -->
              </div>
              <div class="card-body">
                <el-row style="margin-bottom: 10px">
                  <el-col title="领料单位" :span="16">
                    <i class="el-icon-box"></i>
                    <span :title="item.supplierName">{{ item.supplierName }}</span>
                  </el-col>
                  <el-col title="单据状态" :span="8">
                    <i class="el-icon-news"></i>
                    <el-tag size="small" style="margin-left: 5px" :type="calType(item.orderSt)">{{
                      calStatus(item.orderSt)
                    }}</el-tag>
                  </el-col>
                </el-row>
                <el-row style="margin-bottom: 10px">
                  <el-col title="创建用户" :span="8">
                    <i class="el-icon-user"></i>
                    <span :title="item.creatorName">{{ item.creatorName }}</span>
                  </el-col>
                  <el-col title="创建时间" :span="16">
                    <i class="el-icon-timer"></i>
                    <span :title="item.createDate">{{ item.createDate }}</span>
                  </el-col>
                </el-row>
                <el-row style="margin-bottom: 10px">
                  <el-col title="更新用户" :span="8">
                    <i class="el-icon-user"></i>
                    <span :title="item.updaterName">{{ item.updaterName }}</span>
                  </el-col>
                  <el-col title="更新时间" :span="16">
                    <i class="el-icon-alarm-clock"></i>
                    <span :title="item.updateDate">{{ item.updateDate }}</span>
                  </el-col>
                </el-row>
                <el-row style="margin-bottom: 10px">
                  <el-col title="领料人" :span="24">
                    <i class="el-icon-document"></i>
                    <span :title="item.comments">{{ item.comments }}</span>
                  </el-col>
                </el-row>
                <el-row>
                  <!-- <el-col :span="6">
                  <el-button icon="el-icon-edit" @click="addOrUpdateHandle(item.orderId)"></el-button>
                </el-col>
                <el-col :span="6">
                  <el-button icon="el-icon-delete" @click="deleteHandle(item.orderId)"></el-button>
                </el-col> -->
                  <el-col :span="6">
                    <el-button title="明细" icon="el-icon-document" @click="getDetail(item)"></el-button>
                  </el-col>
                  <el-col :span="6"><el-button title="二维码" icon="el-icon-bank-card"
                      @click="openCode(item.orderNo)"></el-button></el-col>
                  <el-col :span="6">
                    <el-button title="删除" icon="el-icon-delete" @click="deleteHandle(item.orderId)"></el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </template>
        <template v-else>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </el-row>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
        layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <el-dialog title="单号二维码" :visible.sync="dialogVisible" width="30%">
        <bar-code v-if="dialogVisible" :showCode="showCode" />
        <p class="showCode">{{ showCode }}</p>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import { addDynamicRoute } from "@/router";
import AddOrUpdate from './components/order-add-or-update'
import { formList } from './config'
import BarCode from '@/components/barCode/index.vue'
import wmsForm from '@/components/wms-form'
import Cookies from 'js-cookie'
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      fullscreenLoading: true,
      mixinViewModuleOptions: {
        getDataListURL: '/wms/order/page',
        getDataListIsPage: true,
        exportURL: '/wms/order/export',
        deleteURL: '/wms/order',
        deleteIsBatch: true
      },
      uploadUrl:"wms/order/upload",
      checkList: [],
      dataForm: {
        orderId: ''
      },
      formList,
      limit: 6,
      dialogVisible: false,
      showCode: '',
      // uploadUrl: 'http://192.168.100.130:8086/wms-admin/wms/order/upload',
      headers: {
        token: Cookies.get('token') || ''
      }
    }
  },
  components: {
    AddOrUpdate,
    BarCode,
    wmsForm
  },
  methods: {
    calType(status) {
      let statusName = ''
      switch (status) {
        case 0: ``
          statusName = 'primary'
          break;
        case 1:
          statusName = 'warning'
          break;
        case 2:
          statusName = 'success'
          break;
        case 3:
          statusName = 'warning'
          break;
        case 4:
          statusName = 'success'
          break;
        default:
          statusName = 'danger'
          break;
      }
      return statusName
    },
    // 主单筛选
    calStatus(status) {
      let statusName = ''
      switch (status) {
        case 0:
          statusName = '初始'
          break;
        case 1:
          statusName = '备货中'
          break;
        case 2:
          statusName = '备货完成'
          break;
        case 3:
          statusName = '出库中'
          break;
        case 4:
          statusName = '出库完成'
          break;
        default:
          statusName = '废弃'
          break;
      }
      return statusName
    },
    // beforeAvatarUpload(file) {
    //   const isXLS = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    //   const isLt2M = file.size / 1024 / 1024 < 10;

    //   if (!isXLS) {
    //     this.$message.error('只能上传 Excel 文件!');
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传文件大小不能超过 10MB!');
    //   }
    //   return isXLS;
    // },
    // 上传文件
    uploadFile(file) {
      console.log(file.raw)
      const formData = new FormData();
      formData.append('file', file.raw);
      this.$http.post(this.uploadUrl, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(({ data: res }) => {
        if (res.code != 0) {
          return this.$message.error(res.msg);
        }
        this.$message({
          message: res.msg,
          type: "success",
          duration: 5000,
          onClose: () => {
            this.getDataList();
          },
        });
      })
          .catch(error => {
            console.error('上传失败', error);
          });
    },
    // 3.任务跳转
    getDetail(row) {
      // 路由参数
      const routeParams = {
        routeName: `${this.$route.name}__${row.orderId}`,
        title: `出库明细 - ${row.orderId}`,
        path: "wms/order-detail",
        params: {
          mtNo: row.orderNo,
          dtId: row.orderId,
          zllbh: row.orderNo,
        },
      }
      // 动态路由
      addDynamicRoute(routeParams, this.$router);
    },
    checkChange(val) {
      console.log(val, this.checkList);
    },
    successHandle(val1, val2) {
      console.log(val1, val2, 'aaaaaa');
    },
    openCode(purchaseNo) {
      this.showCode = purchaseNo
      this.dialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.showCode {
  margin-bottom: 0;
  text-align: center;
}

i {
  color: steelblue;
}

.card-col {
  position: relative;

  .check {
    position: absolute;
    top: 5px;
    right: 10px;
  }
}

.card-content {
  overflow: hidden;
  border: 1px solid #ebeef5;
  box-sizing: border-box;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  padding: 20px 10px 20px;
  border-radius: 8px;

  .card-header {
    // text-align: center;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;

    a {
      text-decoration: none;
    }

    i {
      font-size: 24px;
      vertical-align: top;
      margin-right: 8px;
    }
  }

  .el-row {
    display: flex;
    align-items: center;
    padding: 0 5px 0;

    .el-col {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      span {
        margin-left: 2px;
      }
    }
  }
}
</style>
